<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/" + "resources/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Home</title>
    <link rel="stylesheet" href="css/sellcar.css" media="all">
    <!-- font awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet">

    <!-- bootstrap -->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css"/>

    <!-- animate.css -->
    <link rel="stylesheet" href="assets/animate/animate.css"/>

    <!-- gallery -->
    <link rel="stylesheet" href="assets/gallery/blueimp-gallery.min.css">

    <!-- favicon -->
    <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
    <link rel="icon" href="images/favicon.png" type="image/x-icon">


    <link rel="stylesheet" href="assets/style.css">
    <%--引入jQuery--%>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <%--引入BootStrap--%>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <base href="<%=basePath%>">
    <title>我要买车</title>
    <!-- 头部 -->
    <style type="text/css">
        body{color:cornflowerblue;font: 400 15px/15px Raleway,Arial,Helvetica;}
        .shoubu p{display:inline-block;padding:0px 20px 5px 20px;padding-top: -30px;}
        .shoubu p a:hover{text-decoration:none !important;box-shadow:1px 2px 1px #000;}
        a {
            color: #00a9c6;
            text-decoration: none;
        }
    </style>
    <!-- 中部 -->
    <style type="text/css">
        .carshow a:hover {
            text-decoration: none;
        }

        .carinfo {
            font-size: 20px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .main1 span {
            border-bottom: 4px solid #22ac38;
        }
    </style>
    <!--c:foreach中 样式设计-->
    <style type="text/css">
        .table-detail{
            width: 100%;
        }
        a.car_a{
            height: 300px;
            width:300px;
            text-decoration:none;
            color:#000000;
            /*display: inline-block;*/
            padding-left: 30px;
            padding-bottom: 10px;
        }
        a img.car1{
            width:285px;
        }
        td.car_td{
            padding: 30px;
        }
    </style>
    <!-- 尾部 -->
    <style type="text/css">

        #myCarousel{
            position: absolute;
            top:0px;
            height: 394.4px;
            background-size:cover;
            background-repeat:no-repeat;
            width: 1920.95px;
            z-index: 2;
            background-color: #60db94;
            background-image: url("images/5.jpg");
        }

        .container-fluid{
            position: absolute;
            height:175px;
            left:400px;
            top:125px;
            z-index: 2;
        }
    </style>
    <script src="js/jquery-1.11.2.min.js"></script>

</head>
<body>
<div style="position: relative;">

    <!-- 首页搜索框 new -->
    <nav class="navbar navbar-default" role="navigation" >
        <ul class="nav nav-pills nav-justified">
            <li role="presentation" class="active col-xs-3 form-control" style="width: 5%;border: 0px;"><a href="/page/showCar">首页</a></li>
            <li role="presentation" class="col-xs-3 form-control" style="width: 5%;border: 0px;"><a href="javascript:showDialog();">卖车</a></li>
            <li role="presentation" class="col-xs-3 form-control" style="width: 5%;border: 0px;"><a href="${basePath}/page/user" >个人中心</a></li>
            <li role="presentation" class="col-xs-3 form-control" style="width: 5%;border: 0px;"><a href="/usercenter/out">退出</a> </li>
        </ul>
    </nav>
</div>
<%--sail--%>

<div >
    <form id="form1" method="post" class="form-group" style=" margin: 20px auto;" onsubmit="return false">
    <div class="screen" style="display: flex ">
        <em class="form-control" style="width: 5%;border: 0px;">关键字：</em>
        <input type="text" class="form-control" name="car_mixinfo" placeholder="搜一搜你心仪的车吧" style="width: 15%">
    </div>
    <div class="screen" style="display: flex">
        <em class="form-control" style="width: 5%;border: 0px;">车龄：</em>
        <input type="text" class="form-control"value="0" name="car_age1" style="width: 5%">
        <em class="form-control" style="width: 2%;border: 0px;text-align: center;">-</em>
        <input type="text" class="form-control" value="20" name="car_age2" style="width: 5%">
        <em class="form-control" style="width: 5%;border: 0px;">年</em>
    </div>
    <div class="screen" style="display: flex">
        <em class="form-control" style="width: 5%;border: 0px;">价格：</em>
        <input type="text" class="form-control" value="0" name="car_price1" style="width: 5%">
        <em class="form-control" style="width: 2%;border: 0px;text-align: center;">-</em>
        <input type="text" class="form-control" value="1000" name="car_price2" style="width: 5%">
        <em class="form-control" style="width: 5%;border: 0px;">万</em>
    </div>

    <div class="selection" style="display: flex">
        <em class="form-control" style="width: 5%;border: 0px;">品牌：</em>
        <select name="car_brand" class="form-control" style="width: 8%;">
            <option value="0">不限</option>
            <option value="上汽大众">上汽大众</option>
            <option value="大众(进口)">大众（进口）</option>
            <option value="一汽大众">一汽大众</option>
        </select>
        <em class="form-control" style="width: 5%;border: 0px;">车名：</em>
        <select name="car_name"  class="form-control" style="width: 8%;">
            <option value="0">不限</option>
            <option value="迈特威">迈特威</option>
            <option value="甲壳虫">甲壳虫</option>
            <option value="朗逸">朗逸</option>
            <option value="途安">途安</option>
            <option value="凌渡">凌渡</option>
            <option value="夏朗">夏朗</option>
            <option value="尚酷">尚酷</option>
            <option value="捷达">捷达</option>
            <option value="速腾">速腾</option>
            <option value="迈腾">迈腾</option>
        </select>
        <em class="form-control" style="width: 5%;border: 0px;">车型：</em>
        <select name="car_level" class="form-control" style="width: 8%;">
            <option value="0">不限</option>
            <option value="MPV">MPV</option>
            <option value="豪华车">豪华车</option>
            <option value="跑车">跑车</option>
            <option value="紧凑型车">紧凑型车</option>
            <option value="微型车">微型车</option>
            <option value="中大型SUV">中大型SUV</option>
            <option value="中型车">中型车</option>
            <option value="小型车">小型车</option>
        </select>
        <em class="form-control" style="width: 5%;border: 0px;">变速箱：</em>
        <select name="car_gearbox" class="form-control" style="width: 8%;">
            <option value="0">不限</option>
            <option value="5挡MT">5挡MT</option>
            <option value="5挡AMT">5挡AMT</option>
            <option value="6挡AT">6挡AT</option>
            <option value="6挡MT">6挡MT</option>
            <option value="6挡双离合">6挡双离合</option>
            <option value="7挡双离合">7挡双离合</option>
            <option value="8挡AT">8挡AT</option>
        </select>
        <%--<a href="javascript:void(0)" id="btn">查询</a>--%>
        <button type="submit" id="btn" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
        <%--<div class="clear"></div>--%>
    </div>
    </form>
</div>
<!-- start main1 -->
<div class="form-control">为您推荐</div>
<!-- start main -->
<div class="carshow">
    <table class="table-detail">
        <tbody class="tbody-dom">
        <tr>
            <c:forEach items="${itemsList}" var="item" varStatus="status" begin="0" end="19">
            <td class="car_td">
                <a  class="car_a" href="/page/details?id=${item.carInfo.carId}">
                    <img alt="" src="${item.pic_url}" class="car1" style="left: 20px;">
                    <div class="carinfo">
                        <div class="item_name" style="line-height: 30px;">${item.carInfo.brand}  ${item.carInfo.carName } </div>
                        <div class="item_conf" style="line-height: 30px;">${item.carInfo.confName}</div>
                        <div class="car_age" style="line-height: 30px;">车龄：${item.carInfo.carAge}年 | 行程：${item.carInfo.carMileage}万公里</div>
                        <div class="car_price" style="line-height: 30px;">标价：${item.carInfo.price}万</div>
                    </div>
                </a>
            </td>
            <c:if test="${status.count % 4 == 0}">
        </tr>
        <tr>
            </c:if>
            </c:forEach>
        </tr>
        </tbody>
    </table>
</div>
<!--sellcar_info-->
<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
    <div class="ui-dialog-content">
        <div class="panel panel-default">
            <div class="panel-body">

                <form name="frm" method="post" action="${basePath}/home/sellcar" id="baseinfo" class="form-horizontal" enctype="multipart/form-data" style="background-color: lightsteelblue">
                    <fieldset>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="font-size: medium">上传车辆图片</label>
                            <img id="img" width="200px" style="margin-left:30px;" >
                            <div class="col-sm-4">
                                <input type="file" name="file" id="fileInput" style="margin-left:20px; background-color: lightblue;font-style: oblique;border:dodgerblue" data-classbutton="btn btn-default"
                                       data-classinput="form-control inline" class="filestyle form-control">
                            </div>
                        </div>
                    </fieldset>


                    <table>
                        <tr>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <%--<legend>输入基本信息</legend>--%>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style="font-size: medium">车辆品牌</label>
                                        <div class="col-sm-10">

                                            <select name="brand" id="brand" onChange="redirec(document.frm.brand.options.selectedIndex)" class="form-control m-b" style="background-color: lightblue" >
                                                <%--<option selected>请选择</option>--%>
                                                <%--<option value="1">宝马</option>--%>
                                                <%--<option value="2">奥迪</option>--%>
                                                <%--<option value="3">奔驰</option>--%>
                                                <optgroup label="热门车型">
                                                    <option selected>请选择</option>
                                                    <option value="宝马">宝马</option>
                                                    <option value="奥迪">奥迪</option>
                                                    <option value="奔驰">奔驰</option>
                                                    <option value="大众">大众</option>
                                                    <option value="福特">福特</option>
                                                    <option value="丰田">丰田</option>
                                                    <option value="本田">本田</option>
                                                    <option value="日产">日产</option>
                                                    <option value="法拉利">法拉利</option>
                                                </optgroup>
                                                <%--<optgroup label="A">--%>
                                                <%--<option>奥迪</option>--%>
                                                <%--</optgroup>--%>
                                                <%--<optgroup label="B">--%>
                                                <%--<option>别克</option>--%>
                                                <%--<option>比亚迪</option>--%>
                                                <%--</optgroup>--%>
                                                <%--<optgroup label="C">--%>
                                                <%--<option>长安</option>--%>
                                                <%--<option>川汽野马</option>--%>
                                                <%--</optgroup>--%>
                                                <%--<optgroup label="D">--%>
                                                <%--<option>东风</option>--%>
                                                <%--<option>东南</option>--%>
                                                <%--</optgroup>--%>
                                                <%--<optgroup label="F">--%>
                                                <%--<option>福特</option>--%>
                                                <%--<option>法拉利</option>--%>
                                                <%--</optgroup>--%>
                                            </select>
                                            <label class="col-sm-2 control-label" style="font-size: medium">车系</label>
                                            <select name="car_name" id="car_name" style="width: 260px; margin-left:20px;background-color: lightblue;font-style: oblique;border:dodgerblue"" >
                                                <option value="请选择" selected>请选择</option>
                                            </select>

                                            <script language="javascript">
                                                //获取一级菜单长度
                                                var select1_len = document.frm.brand.options.length;
                                                var select2 = new Array(select1_len);
                                                //把一级菜单都设为数组
                                                for (i=0; i<select1_len; i++)
                                                { select2[i] = new Array();}
                                                //定义基本选项
                                                select2[0][0] = new Option("请选择", " ");

                                                select2[1][0] = new Option("宝马一系", "宝马一系");
                                                select2[1][1] = new Option("宝马二系", "宝马二系");
                                                select2[1][2] = new Option("宝马三系", "宝马三系");

                                                select2[2][0] = new Option("奥迪A1", "奥迪A1");
                                                select2[2][1] = new Option("奥迪A4", "奥迪A4");
                                                select2[2][2] = new Option("奥迪A6", "奥迪A6");

                                                select2[3][0] = new Option("奔驰1", "奔驰1");
                                                select2[3][1] = new Option("奔驰2", "奔驰2");
                                                select2[3][2] = new Option("奔驰3", "奔驰3");

                                                select2[4][0] = new Option("大众1", "大众1");
                                                select2[4][1] = new Option("大众2", "大众2");
                                                select2[4][2] = new Option("大众3", "大众3");
                                                select2[5][0] = new Option("福特1", "福特1");
                                                select2[5][1] = new Option("福特2", "福特2");
                                                select2[5][2] = new Option("福特3", "福特3");

                                                select2[6][0] = new Option("丰田1", "丰田1");
                                                select2[6][1] = new Option("丰田2", "丰田2");
                                                select2[6][2] = new Option("丰田3", "丰田3");

                                                select2[7][0] = new Option("本田1", "本田1");
                                                select2[7][1] = new Option("本田2", "本田2");
                                                select2[7][2] = new Option("本田3", "本田3");


                                                select2[8][0] = new Option("日产1", "日产1");
                                                select2[8][1] = new Option("日产2", "日产2");
                                                select2[8][2] = new Option("日产3", "日产3");

                                                select2[9][0] = new Option("法拉利1", "法拉利1");
                                                select2[9][1] = new Option("法拉利2", "法拉利2");
                                                select2[9][2] = new Option("法拉利3", "法拉利3");
                                                //联动函数
                                                function redirec(x)
                                                {
                                                    var temp = document.frm.car_name;
                                                    for (i=0;i<select2[x].length;i++)
                                                    { temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
                                                    temp.options[0].selected=true;
                                                }
                                            </script>

                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label"style="font-size: medium">里程数</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;background-color: lightblue;font-style: oblique;border:dodgerblue" name="car_mileage" id="car_mileage" placeholder="单位（万公里）"
                                            class="form-control">
                                            <%--<span class="help-block m-b-none">车辆从购买之日起跑过的里程数，以里程表上数据为准，禁止造假.</span>--%></div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">基本配置</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="conf_name" id="conf_name" placeholder="如：2017款 330TSI 舒适版"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">级别</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="level" id="level" placeholder="如：中、小型车"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">发动机</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="engine" id="engine" placeholder="如：81kW (1.5L自然吸气)"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">变速箱</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="gearbox" id="gearbox" placeholder="如：5档MT"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">车身结构</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="body_structure" id="body_structure" placeholder="如：4门5座三厢轿车"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">汽车尺寸</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="size" id="size" placeholder="单位（mm）"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">最大车速</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="maximumspeed" id="maximumspeed" placeholder="单位（公里每小时）"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">行李箱容积</label>
                                        <div class="col-sm-10">
                                            <input type="text" style="width: 260px; margin-left:20px;" name="cargo_volume" id="cargo_volume" placeholder="单位（升）"
                                                   class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label for=car_price class="col-sm-2 control-label" style="font-size: medium">报价</label>
                                        <div class="col-sm-10">
                                            <input style="width: 260px; margin-left:20px;background-color: lightblue;font-style: oblique;border:dodgerblue" name="price" id="car_price" placeholder="单位（万元）"
                                                   type="text" class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label for="car_age" class="col-sm-2 control-label" style="font-size: medium">车龄</label>
                                        <div class="col-sm-10">
                                            <input style="width: 260px; margin-left:20px;background-color: lightblue;font-style: oblique;border:dodgerblue" name="car_age" id="car_age" placeholder="单位（年）"
                                                   type="text" class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset class="last-child">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" style="font-size: medium">受损程度</label>
                                        <div class="col-sm-10">
                                            <select style="width: 260px; margin-left:20px; background-color: lightblue;font-style: oblique;border:dodgerblue" name="car_damage" id="car_damage" class="form-control m-b">
                                                <option>0%</option>
                                                <option>5%</option>
                                                <option>10%</option>
                                                <option>15%</option>
                                                <option>20%</option>
                                                <option>25%</option>
                                                <option>30%</option>
                                                <option>35%</option>
                                                <option>40%</option>
                                                <option>45%</option>
                                                <option>50%</option>
                                                <option>55%</option>
                                                <option>60%</option>
                                                <option>65%</option>
                                                <option>70%</option>
                                                <option>75%</option>
                                                <option>80%</option>
                                                <option>85%</option>
                                                <option>90%</option>
                                                <option>95%</option>
                                                <option>100%</option>
                                            </select>
                                            <br>
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label for="address" class="col-sm-2 control-label" style="font-size: medium">验车地址</label>
                                        <div class="col-sm-10">
                                            <input id="address" name="address" style="width: 260px; margin-left:20px; background-color: lightblue;font-style: oblique;border:dodgerblue" placeholder="请填写详细地址"
                                                   type="text" class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label for="license_address" class="col-sm-2 control-label" style="font-size: medium">牌照归属地</label>
                                        <div class="col-sm-10">
                                            <input id="license_address" name="license_address" style="width: 260px; margin-left:20px; background-color: lightblue;font-style: oblique;border:dodgerblue" placeholder="如：河北秦皇岛"
                                                   type="text" class="form-control">
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                            <td>
                                <fieldset>
                                    <div class="form-group">
                                        <label for="iseager" class="col-sm-2 control-label" style="font-size: medium">是否急于出售</label>
                                        <div class="col-sm-10">
                                            <select style="width: 260px; margin-left:20px; background-color: lightblue;font-style: oblique;border:dodgerblue" id="iseager" name="iseager" class="form-control m-b">
                                                <option>是</option>
                                                <option>否</option>
                                            </select>
                                            <br>
                                        </div>
                                    </div>
                                </fieldset>
                            </td>
                        </tr>
                    </table>
                    <fieldset>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <table>
                                    <tr>
                                        <button type="button" onclick="javascript:hideDialog();" style="font-size: large;background-color: lightblue;width: 100px;height: 30px">取消</button>
                                        <button type="button" id="carinfo_submit" style="font-size: large;background-color: lightblue;width: 100px;height: 30px">提交</button></tr>
                                </table>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".app").click(function(){
            $(".erweima").slideToggle();
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".shoufang").click(function(){
            $(".lianxiway").slideToggle();
        });
        $(".contact_us").click(function(){
            $(".lianxiway").slideDown();
        });
    });
</script>
<!-- jquery -->
<script src="assets/jquery.js"></script>

<!-- wow script -->
<script src="assets/wow/wow.min.js"></script>

<!-- boostrap -->
<script src="assets/bootstrap/js/bootstrap.js" type="text/javascript"></script>

<!-- jquery mobile -->
<script src="assets/mobile/touchSwipe.min.js"></script>
<script src="assets/respond/respond.js"></script>



<script src="js/jquery.form.js"></script>
<script src="js/browser.js"></script>

<!--sellcar_info script-->
<script type="text/javascript">

    var dialogInstace, onMoveStartId, mousePos = {x: 0, y: 0};	//	用于记录当前可拖拽的对象

    // var zIndex = 9000;

    //	获取元素对象
    function g(id) {
        return document.getElementById(id);
    }

    //	自动居中元素（el = Element）
    function autoCenter(el) {
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;

        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (bodyW - elW) / 2 + 'px';
        el.style.top = (bodyH - elH) / 2 + 'px';

    }


    //	Dialog实例化的方法
    function Dialog(dragId, moveId) {

        var instace = {};

        instace.dragElement = g(dragId);	//	允许执行 拖拽操作 的元素
        instace.moveElement = g(moveId);	//	拖拽操作时，移动的元素

        instace.mouseOffsetLeft = 0;			//	拖拽操作时，移动元素的起始 X 点
        instace.mouseOffsetTop = 0;			//	拖拽操作时，移动元素的起始 Y 点

        instace.dragElement.addEventListener('mousedown', function (e) {

            var e = e || window.event;

            dialogInstace = instace;
            instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;
            instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;

            onMoveStartId = setInterval(onMoveStart, 10);
            return false;
            // instace.moveElement.style.zIndex = zIndex ++;
        });

        return instace;
    }
    //	重新调整对话框的位置和遮罩，并且展现
    function showDialog() {
        var user = "${user}";  //若session无user值 判为游客登录 返回登录界面
        if(user=="" || user==null) {
            alert("请先登录");
            window.location.href="/login/login"
        }
        g('dialogMove').style.display = 'block';
        autoCenter(g('dialogMove'));
    }
    //	关闭对话框
    function hideDialog() {
        g('dialogMove').style.display = 'none';
    }
    //Dialog('dialogDrag', 'dialogMove');
</script>

<script type="text/javascript">
    $("#carinfo_submit").click(function () {
        var fileInput = $.trim($("#fileInput").val());
        var brand = $.trim($("#brand").find("option:selected").text());
        var car_name = $.trim($("#car_name").find("option:selected").text());
        var car_mileage = $.trim($("#car_mileage").val());
        var price = $.trim($("#car_price").val());
        var car_age = $.trim($("#car_age").val());
        var car_damage = $.trim($("#car_damage").find("option:selected").text());
        var address = $.trim($("#address").val());
        var license_address = $.trim($("#license_address").val());
        var iseager = $.trim($("#iseager").find("option:selected").text());

        if (fileInput == "") {
            alert("请至少上传一张图片！");
            return false;
        } else if (car_mileage == "") {
            alert("行驶里程不能为空！");
            return false;
        }
        else if (price == "") {
            alert("汽车售价不能为空！");
            return false;
        } else if (car_age == "") {
            alert("车龄不能为空！");
            return false;
        }
        else if (address == "") {
            alert("验车地址不能为空！");
            return false;
        }
        else if (license_address == "") {
            alert("汽车牌照归属地不能为空！");
            return false;
        }

        //ajax去服务器端校验

        var options = {
            success: function(data) {
                alert(data);
                $(this).resetForm();
                javascript:hideDialog();
            }
        };

        $('#baseinfo').ajaxSubmit(options);
    });

</script>

<script type="text/javascript">
    $(function () {
        var discussListDom = $(".table-detail").find(".tbody-dom");
//        console.log(discussListDom.html());
//            var discussListDom = document.getElementsByName("tbody-dom");
        $("#btn").click(function () {
            var mixinfo = $("input[name='car_mixinfo']").val();
            var brand = $("select[name='car_brand']").val();
            var carName = $("select[name='car_name']").val();
            var gearbox = $("select[name='car_gearbox']").val();
//            alert(gearbox);
            var level = $("select[name='car_level']").val();
            var age1 = $("input[name='car_age1']").val();
            var age2 = $("input[name='car_age2']").val();
            var price1 = $("input[name='car_price1']").val();
            var price2 = $("input[name='car_price2']").val();
            var params = {
                mixinfo: mixinfo,
                brand: brand,
                carName: carName,
                gearbox: gearbox,
                level: level,
                age1: age1,
                age2: age2,
                price1: price1,
                price2: price2
            };
//            alert(121);
            $.ajax({
                type: "post",
                url: "../carInfo/selectCar",
                data: params,
                success: function (data) {
//                        alert(data);
//                        alert(typeof data);
//                    alert(JSON.stringify(data));
//                        discussListDom.children().remove();
//                    alert(discussListDom.attr("innerHTML"));
                    addDiscuss(data, discussListDom);
                }
            });
        });
        function addDiscuss(data, discussListDom) {
//            discussListDom.children().removeAll();
            discussListDom.find("tr").remove();
//            alert(data.length);
            for (var i = 0; i < data.length; i++) {
                if (i + 3 <= data.length - 1) {
                    var liDom = $("<tr></tr>");
                    var message = "";
//                    alert(i);
                    message = "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i].carInfo.brand+"  "+data[i].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i].carInfo.confName+"</div>"+
                        "<div class='car_age' style='line-height: 30px;'>车龄: "+data[i].carInfo.carAge+"年"+"| 行程："+data[i].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i].carInfo.price+"万元"+"</div></div></a></div>" +
                        "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i+1].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i+1].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i+1].carInfo.brand+"  "+data[i+1].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i+1].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i+1].carInfo.carAge+"年"+"| 行程："+data[i+1].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i+1].carInfo.price+"万元"+"</div></div></a></div>" +
                        "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i+2].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i+2].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i+2].carInfo.brand+"  "+data[i+2].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i+2].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i+2].carInfo.carAge+"年"+"| 行程："+data[i+2].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i+2].carInfo.price+"万元"+"</div></div></a></div>" +
                        "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i+3].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i+2].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i+3].carInfo.brand+"  "+data[i+3].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i+3].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i+3].carInfo.carAge+"年"+"| 行程："+data[i+3].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i].carInfo.price+"万元"+"</div></div></a></div>";
                    i = i + 3;
//                    alert(message);
//                    alert("end:"+i);
                    liDom.html(message);
                    discussListDom.append(liDom);
                }else if(i+2<=data.length-1){
                    var liDom = $("<tr></tr>");
                    var message = "";
//                    alert(i);
                    message = "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i].carInfo.brand+"  "+data[i].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i].carInfo.carAge+"年"+"| 行程："+data[i].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i].carInfo.price+"万元"+"</div></div></a></div>" +
                        "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i+1].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i+1].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i+1].carInfo.brand+"  "+data[i+1].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i+1].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i+1].carInfo.carAge+"年"+"| 行程："+data[i+1].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i+1].carInfo.price+"万元"+"</div></div></a></div>" +
                        "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i+2].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i+2].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i+2].carInfo.brand+"  "+data[i+2].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i+2].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i+2].carInfo.carAge+"年"+"| 行程："+data[i+2].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i+2].carInfo.price+"万元"+"</div></div></a></div>";
                    i = i + 2;
                    liDom.html(message);
                    discussListDom.append(liDom);
                } else if (i + 1 == data.length - 1) {
//                    alert("if222"+i);
                    var liDom = $("<tr></tr>");
                    var message = "";
                    message = "<td class='car_td'> <a  class='car_a' href='/page/details?id=" + data[i].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i].carInfo.brand+"  "+data[i].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i].carInfo.carAge+"年"+"| 行程："+data[i].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i].carInfo.price+"万元"+"</div></div></a></div>" +
                        "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i+1].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i+1].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i+1].carInfo.brand+"  "+data[i+1].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i+1].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i+1].carInfo.carAge+"年"+"| 行程："+data[i+1].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i+1].carInfo.price+"万元"+"</div></div></a></div>";
                    i = i + 1;
                    liDom.html(message);
                    discussListDom.append(liDom);
                }
                else {
                    var liDom = $("<tr></tr>");
                    var message = "";
                    message = "<td class='car_td'><a  class='car_a' href='/page/details?id=" + data[i].carInfo.carId + "'>"+
                        "<img alt='erorr' src='"+data[i].pic_url+"' class='car1'>"+
                        "<div class='carinfo'>"+
                        "<div class='item_name'style='line-height: 30px;'>"+data[i].carInfo.brand+"  "+data[i].carInfo.carName+" </div>"+
                        "<div class='item_conf'style='line-height: 30px;'>"+data[i].carInfo.confName+"</div>"+
                        "<div class='car_age'style='line-height: 30px;'>车龄: "+data[i].carInfo.carAge+"年"+"| 行程："+data[i].carInfo.carMileage+"万公里"+"</div>"+
                        "<div class='car_price'style='line-height: 30px;'>标价："+data[i].carInfo.price+"万元"+"</div></div></a></div>";
//                    i=i+1;
                    liDom.html(message);
                    discussListDom.append(liDom);
                }
            }

        };
    });

</script>
</body>
</html>